<template>
  <div id="home">
    <!-- 导航条 -->
    <nav-bar class="home-nav">
      <div slot="center">
        购物街
      </div>
    </nav-bar>
    <!-- 轮播图 -->
    <home-swiper :banners="banners" />

    <!-- 推荐信息 -->
    <home-recommend :recommends="recommends" />

    <!-- 本周流行 -->
    <home-feature/>

    <!--  -->
    <tab-control class="tab-control" :titles="['流行', '新款', '精选']" @tabClick="tabClick"></tab-control>

    <!-- 商品列表页 -->
    <good-list :goods="showGoods"></good-list>

  </div>
</template>

<script>
  // 子组件 
  import HomeSwiper from './childComps/HomeSwiper'
  import HomeRecommend from './childComps/HomeRecommend'
  import HomeFeature from './childComps/HomeFeature'
  // 常用组件
  import NavBar from 'components/common/navbar/NavBar'
  import TabControl from 'components/content/tabControl/TabControl'
  import GoodList from 'components/content/goods/GoodsList'

  import {getHomeMultidata, getHomeGoods} from "network/home"
  
  export default {
    name: 'Home',
    data() {
      return {
        banners: [],
        recommends: [],
        goods: {
          'pop' : {page: 0, list: []},
          'new' : {page: 0, list: []},
          'sell' : {page: 0, list: []}
        },
        currentType: 'pop'
      }
    },
    components: {
      HomeSwiper,
      HomeRecommend,
      HomeFeature,
      NavBar,
      TabControl,
      GoodList,
    },
    created() {
      this.getHomeMultidata()

      this.getHomeGoods('pop')
      // this.getHomeGoods('news')
      // this.getHomeGoods('sell')
    },
    computed: {
      showGoods() {
        return this.goods[this.currentType].list
      }
    },
    methods: {
      // ========== 事件监听 =============
      // 1. tabControl点击
      tabClick(index) {
        console.log(index)
        switch (index) {
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }

        // 调用数据请求接口重新获取数据
        this.getHomeGoods(this.currentType)
      },

      // ========== 网络请求 =============
      // 1. 请求首页数据
      getHomeMultidata() {
        getHomeMultidata(
        ).then(res => {
            console.log(res)
            this.banners = res.data.data.banner.list
            this.recommends = res.data.data.recommend.list

        }).catch(err => {
            console.log(err)
        })
      },
      // 2. 请求商品数据
      getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type, page)
        .then(res => {
          const data = res.data.data.list
          console.log(data)
          
          // 商品数据存储
          this.goods[type].list.push(...data)
          // 页面数据+1
          this.goods[type].page += 1

        })
        .catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped lang="less">
  #home {
    // 因为导航条已经脱离页面所以需要给其留出显示空间
    padding-top: 44px;

    .tab-control {
      // 在距离顶部44像素的位置进行停留
      position: sticky;
      top: 42px;
      z-index: 5;

      // 设置背景颜色不让其透明
      background-color: var(--color-background);
    }
  }

  .home-nav {
    background-color: var(--color-tint) ;
    color: #fff;

    // 定位： 不让导航栏随着滚动滚动
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
</style>